<template>
  <div>
    <!-- Sticky 粘性布局 将内容包裹在 Sticky 组件内即可。 -->
    <van-sticky>
      <van-nav-bar
        title="食物健康检测"
        left-text="返回"
        @click-left="onClickLeft"
      />
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </van-sticky>
    <!-- Layout 布局  Layout 提供了 van-row 和 van-col 两个组件来进行行列布局。 -->
    <van-row>
      <van-col span="6">
        <!-- 侧边导航 -->
        <van-sidebar v-model="activeKey">
          <!-- <van-sidebar-item     "标签名称" /> -->
          <van-sidebar-item title="奶制品" @click="getsoymilk" />
          <van-sidebar-item title="蔬菜类" @click="getvegetable" />
          <van-sidebar-item title="主食类" @click="getmain" />
          <van-sidebar-item title="水果类" />
          <van-sidebar-item title="凉菜类" />
          <van-sidebar-item title="水果类" />
          <van-sidebar-item title="热菜类" />
          <van-sidebar-item title="海鲜类" />
          <van-sidebar-item title="酸甜类" />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <van-row>
          <van-col
            class="grid"
            v-for="(item, index) in data"
            :key="index"
            @click="pitch(item)"
            span="8"
            :class="{ frame: item.quality }"
          >
            <img :src="item.imgUrl" alt="" />
            <p>{{ item.name }}</p>
          </van-col>
        </van-row>
      </van-col>
    </van-row>

    <!-- 弹框 overlay	是否显示遮罩层-->
    <van-popup
      v-if="$store.state.stdata.length"
      class="pop-box"
      v-model="show"
      position="bottom"
      :overlay="false"
      :style="{ height: '50%' }"
    >
      <div class="top">
        <span>已选食物({{ num }})</span>
        <van-button plain hairlin size="small" type="default" @click="go"
          >去测评</van-button
        >
      </div>
      <div class="tag-box">
        <!-- 可关闭标签 添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。 -->
        <van-tag
          class="label"
          v-for="(item, index) in $store.state.stdata"
          :key="index"
          closeable
          size="medium"
          type="primary"
          @close="close(item)"
        >
          {{ item.name }}
        </van-tag>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      //接收数据
      data: [],
    };
  },
  mounted() {
    this.getmain();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取豆奶数据
    getsoymilk() {
      this.$http("/豆奶制品.json", "get").then((res) => {
        console.log(res);
        this.data = res.data;
        this.highlight();
      });
    },
    //获取蔬菜类
    getvegetable() {
      this.$http("/蔬菜类.json", "get").then((res) => {
        console.log(res);
        this.data = res.data;
        this.highlight();
      });
    },
    //获取主食类
    getmain() {
      this.$http("/主食.json", "get").then((res) => {
        console.log(res);
        this.data = res.data;
        this.highlight();
      });
    },
    //选中加高亮
    pitch(item) {
      this.$store.commit("pitch", item);
      this.highlight();
    },
    //高亮
    highlight() {
      //先重置一下
      this.data.forEach((r, i) => {
        this.data[i].quality = 0;
      });
      this.$store.state.stdata.forEach((item, index) => {
        this.data.forEach((r, i) => {
          if (r.name == item.name) {
            this.data[i].quality = 1;
          }
        });
      });
    },

    //去检测
    go() {
      this.$router.push("/detail");
    },
    //关闭标签
    close(item) {
      this.$store.commit("close", item);
      this.highlight();
    },
  },
  computed: {
    //弹框操作
    show() {
      if (this.$store.state.stdata.length == 0) {
        return false;
      } else {
        return true;
      }
    },
    //计算数量
    num() {
      return this.$store.state.stdata.length;
    },
  },
};
</script>

<style lang='scss'>
.grid {
  height: 100px;
  text-align: center;
}
.grid img {
  width: 60px;
  height: 65px;
  border-radius: 10px;
}
.grid p {
  font-size: 14px;
  font-weight: 700;
  margin: 3px 0px;
  font-family: "幼圆";
}
.frame img {
  border: 5px solid teal;
}
.frame p {
  color: teal;
}
.pop-box {
  border-top: 1px solid green;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 4px;
}
.label{
    margin: 4px;
}
</style>
